<!--  -->
<template>
<div class=''>
    <!--入库管理列表-->
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <!--模糊查及操作-->
                <el-dropdown trigger="hover" style="margin-left: 10px">
                    <el-button style="width: 70px">入库</el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="caigou">采购入库</el-dropdown-item>
                        <el-dropdown-item @click.native="lingyong">领用还回</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button style="width: 70px;margin-left: 10px" @click="xiugai">编辑</el-button>
                <el-button style="width: 70px;margin-left: 10px" @click="shanchu">删除</el-button>
                <div style="margin-left: 1090px;margin-top: -30px">
                    <el-input v-model="warehouseDto.codeName" placeholder="请输入入库单号或入库主题" style="width: 230px">
                        <i slot="append" class="el-input__icon el-icon-search" style="height: 20px;line-height: 20px;width: 10px" @click="selAllWareHouse"></i>
                    </el-input>
                    <i class="el-icon-menu" style="margin-left: 3px;margin-top: 3px;height: 30px;width: 30px;color: #C7CDD9" @click="showSpare = true"></i>
                </div>
                <!--表格-->
                <el-table
                        :data="wareList"
                        @selection-change="wareListSelection"
                        border
                        style="width: 79.9%;margin-top: 10px">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            fixed
                            align="center"
                            prop="spId"
                            label="序号"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="wareCode"
                            label="入库单号"
                            width="130">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="wareName"
                            label="入库主题"
                            width="130">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="wareTime"
                            label="入库日期"
                            width="130">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="入库类型"
                            width="130">
                        <template slot-scope="scope">
                            {{ scope.row.wareType === 2 ? "采购入库" : "归还入库" }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="wareVo.warehouseName"
                            label="仓库名称"
                            width="130">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="wareVo.peopleName"
                            label="仓库管理员"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="applyPeople.peopleManagementName"
                            label="入库申请人"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="applyPeople.departmentName"
                            label="所在部门"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="warePeople.peopleManagementName"
                            label="入库人员"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="totalInbound"
                            label="入库总量"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="updateTime"
                            label="操作时间"
                            width="130">
                    </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination
                        :current-page.sync="warehouseDto.page"
                        :page-size="warehouseDto.pagesize"
                        :page-sizes="[10, 20, 30, 40]"
                        :total="total"
                        background
                        layout="total, sizes ,prev, pager, next, jumper"
                        style="padding: 30px 0; text-align: center"
                        @current-change="selAllWareHouse"
                        @size-change="handleSizeChanges"
                />
                <!--弹出层模糊查信息-->
                <div v-if="showSpare" style="width: 700px;height: 270px;background: white;position: fixed;left: 861px;top:120px;z-index: 900;border: 1px solid #F4F4F4;border-radius: 4px">
                    <el-form ref="form" :model="warehouseDto" label-width="100px">
                        <el-form-item label="入库编号" style="margin-top: 20px">
                            <el-input v-model="warehouseDto.wareCode" style="width: 180px"></el-input>
                        </el-form-item>
                        <el-form-item label="入库日期">
                            <el-date-picker
                                    v-model="warehouseDto.wareTime"
                                    type="date"
                                    style="width: 180px"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="仓库名称">
                            <el-select v-model="warehouseDto.warehouseId" placeholder="请选择入库申请人">
                                <el-option v-for="operator in wareHouses" :key="operator.id" :label="operator.warehouseName" :value="operator.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="入库申请人">
                            <el-select v-model="warehouseDto.applicantId" placeholder="请选择入库申请人">
                                <el-option v-for="operator in peopleData" :key="operator.peopleManagementId" :label="operator.peopleManagementName" :value="operator.peopleManagementName"></el-option>
                            </el-select>
                        </el-form-item>
                        <div style="margin-left: 320px;position: relative;top: -190px">
                            <el-form-item label="入库人员">
                                <el-select v-model="warehouseDto.warePersonid" placeholder="请选择入库人员">
                                    <el-option v-for="operator in peopleData" :key="operator.peopleManagementId" :label="operator.peopleManagementName" :value="operator.peopleManagementName"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="入库主题">
                                <el-input v-model="warehouseDto.wareName" style="width: 180px"></el-input>
                            </el-form-item>
                            <el-form-item label="入库类型">
                                <el-select v-model="warehouseDto.wareType" placeholder="请选择入库类型">
                                    <el-option label="采购入库" value="2"></el-option>
                                    <el-option label="归还入库" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="操作时间">
                                <el-date-picker type="datetime" v-model="warehouseDto.updateTime"></el-date-picker>
                            </el-form-item>
                        </div>
                    </el-form>
                    <div style="width: 100%;height: 50px;border-top: 1px solid #F4F4F4;margin-top: -170px">
                        <el-button @click="showSpare =  false">关闭</el-button>
                        <el-button @click="empty()" style="margin-top: 10px;margin-left: 20px">清空</el-button>
                        <div style="margin-left: 590px;margin-top: -28px">
                            <el-button type="success" @click="selAllWareHouse">查询</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    showSpare:false,
    wareList:[],
    total:0,
    warehouseDto:{
        codeName:null,
        wareCode:null,
        wareName:null,
        wareTime:null,
        wareType:null,
        warehouseId:null,
        applicantId:null,
        warePersonid:null,
        updateTime:null,
        page:1,
        pageSize:10
    },
    //人员数据
    peopleData:[],
    //仓库数据
    wareHouses:[],
    ids:[],
    idss:[]
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    xiugai(){
        if (this.ids.length>1){
            this.$message.error('只能选择一条数据进行修改');
        } else if (this.ids.length == 0){
            this.$message({
                message: '您还没有选择数据',
                type: 'warning'
            });
        }else {
            let id = this.ids[0].spId
            this.$router.push({ path: '/collectingWare', query: { id: id }})
        }
    },
    shanchu(){
        for (let i = 0; i < this.ids.length; i++) {
            this.idss.push(this.ids[i].spId)
        }
        this.request.post("/spare/warehousing/deleteBatch",this.idss)
        .then(res=>{
            this.$message({
                message: '删除成功',
                type: 'success'
            });
            this.selAllWareHouse()
        })
    },
    caigou(){
        this.$router.push({ path: '/collectingWare', query: { type: 2 }})
    },
    lingyong(){
        this.$router.push({ path: '/collectingWare', query: { type: 1 }})
    },
    empty(){
        this.warehouseDto.wareCode = null
        this.warehouseDto.wareName = null
        this.warehouseDto.wareTime = null
        this.warehouseDto.wareType = null
        this.warehouseDto.warehouseId = null
        this.warehouseDto.applicantId = null
        this.warehouseDto.warePersonid = null
        this.warehouseDto.updateTime = null
    },
    selAllWareHouse(){
      this.request.post("/spare/warehousing/selAllWareHouse",this.warehouseDto)
      .then(res=>{
          console.log(res)
          this.wareList = res.data.items
          this.total = res.data.counts
      })
    },
    wareListSelection(val){
        console.log(val)
        this.ids = val
    },
    //分页跳转数据
    handleSizeChanges(pageSize) {
        this.warehouseDto.pagesize = pageSize;
        this.selAllWareHouse();
    },
    //查询人员数据
    selAllPeople(){
        this.request.get("/system/people-management/selAllPeople")
            .then(res=>{
                this.peopleData = res.data
            })
    },
    selAllWareHouses(){
        this.request.get("/system/warehouse-management/selAllWareHouses")
        .then(res=>{
            this.wareHouses = res.data
        })
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.selAllWareHouse()
    this.selAllPeople()
    this.selAllWareHouses()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>
